var mW = 280;
var mH = 280;
console.log(a)

console.log(vm.$data);
var  a,b,c,d,e,f,g,h;
var mData = [
    ['主旨题', a],
    ['目的', b],
    ['细节题', c],
    ['句子功能题', d],
    ['说话人态度题', e],
    ['分类信息题', f],
    ['排序题', g],
    ['推论题', h],
];
var mCount = mData.length; //边数 6
var mCenter = mW / 2; //中心点150
var mRadius = mCenter - 50; //半径(减去的值用于给绘制的文本留空间)100
var mAngle = Math.PI * 2 / mCount; //角度60
var mCtx = null;
var mColorPolygon = '#878787'; //多边形颜色
var mColorLines = '#878787'; //顶点连线颜色
var mColorText = '#000000'; //文本颜色

//初始化
(function() {
    var canvas = document.getElementById("canvas")
    // document.body.appendChild(canvas);
    canvas.height = mH;
    // console.log(mH);
    canvas.width = mW;
    mCtx =  canvas.getContext('2d');

    drawPolygon(mCtx); //绘制背景
    drawLines(mCtx); //绘制顶点连线
    drawText(mCtx); //绘制文本
    drawRegion(mCtx); //绘制数据区域
    drawCircle(mCtx); //画点
})();

// 绘制多边形边
function drawPolygon(ctx) {
    ctx.save();
    ctx.strokeStyle = mColorPolygon;
    var r = mRadius / mCount; //单位半径;
    //画6个圈
    for(var i = 0; i < mCount; i++) {
        ctx.beginPath();
        var currR = r * (i + 1); //当前半径
        //画6条边
        for(var j = 0; j < mCount; j++) {
            //背景为多边形
            //				var y = mCenter + currR * Math.cos(mAngle * j);
            //				var x = mCenter + currR * Math.sin(mAngle * j);
            //				ctx.lineTo(x, y);
            //背景为圆形
            ctx.arc(mCenter, mCenter, currR, 0, 2 * Math.PI);
        }
        ctx.closePath()
        ctx.stroke();
    }

    ctx.restore();
}

//顶点连线及画点
function drawLines(ctx) {
    ctx.save();

    ctx.strokeStyle = mColorLines;
    for(var i = 0; i < mCount; i++) {
        ctx.beginPath();
        var y = mCenter + (mRadius + 15) * Math.cos(mAngle * i);
        var x = mCenter + (mRadius + 15) * Math.sin(mAngle * i);
        ctx.moveTo(mCenter, mCenter);
        ctx.lineTo(x, y);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(x, y, 2, 0, Math.PI * 2);
        ctx.fillStyle = '#fff000';
        ctx.fill();
    }

    ctx.restore();
}

//绘制文本
function drawText(ctx) {
    ctx.save();
    var fontSize = mCenter / 12;
    ctx.font = fontSize + 'px Microsoft Yahei';
    ctx.fillStyle = mColorText;

    for(var i = 0; i < mCount; i++) {
        var y = mCenter + (mRadius + 15) * Math.cos(mAngle * i);
        var x = mCenter + (mRadius + 15) * Math.sin(mAngle * i);

        //			if(mAngle * i >= 0 && mAngle * i <= Math.PI / 2) {
        //				ctx.fillText(mData[i][0], x, y + fontSize);
        //			} else if(mAngle * i > Math.PI / 2 && mAngle * i <= Math.PI) {
        //				ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y + fontSize);
        //			} else if(mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2) {
        //				ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y);
        //			} else {
        //				ctx.fillText(mData[i][0], x, y);
        //			}
        if(mAngle * i >= 0 && mAngle * i <= Math.PI / 2) {
            ctx.fillText(mData[i][0], x, y + fontSize);
        } else if(mAngle * i > Math.PI / 2 && mAngle * i <= Math.PI) {
            ctx.fillText(mData[i][0], x, y);
        } else if(mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2) {
            ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y);
        } else {
            ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y);
        }

    }

    ctx.restore();
}

//绘制数据区域
function drawRegion(ctx) {
    ctx.save();

    ctx.beginPath();
    for(var i = 0; i < mCount; i++) {
        var y = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
        var x = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;

        ctx.lineTo(x, y);
    }
    ctx.closePath();
    ctx.fillStyle = 'rgba(255,240,0,0.9)';
    ctx.fill();

    ctx.restore();
}

//画点
function drawCircle(ctx) {
    ctx.save();
    var r = 2;
    for(var i = 0; i < mCount; i++) {
        var y = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
        var x = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;

        ctx.beginPath();
        ctx.arc(x, y, r, 0, Math.PI * 2);
        ctx.fillStyle = '#fff000';
        ctx.fill();
    }

    ctx.restore();
}